<template>
    <popupBottom ref="popupBottomRef" :is-title="false" height="60vh">
        <template v-slot:content>
            <view class="margin-top-base sku-popup">
                <view style="padding-top: 50rpx">
                    <view class="flex">
                        <view style="border: 1px solid #eee" class="radius-lg margin-right-lg">
                            <image class="size-img-base" :src="goods.thumb" mode="widthFix" />
                        </view>
                        <view style="flex: 1">
                            <view class="text-lg text-bold" style="line-height: 1.5">{{ goods.title }}</view>
                            <view class="text-grey margin-top-sm">库存：{{ goods?.sku[selectIndex].amount }}</view>
                            <view class="margin-top-sm text-red text-bold">
                                <text>￥</text>
                                <text class="text-2xl">{{ goods?.sku[selectIndex].price }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="margin-top-xl">
                        <view class="text-lg text-bold margin-bottom-base">规格</view>
                        <view class="sku-list">
                            <template v-for="(item, index) in goods.sku" :key="item.id">
                                <button @click="selectSku(index)" class="cu-btn" :class="selectIndex === index && item.amount > 0 ? 'bg-main' : ''">
                                    {{ item.name }}
                                </button>
                            </template>
                        </view>
                    </view>

                    <view class="flex align-center justify-between" style="margin-top: 60rpx">
                        <view class="text-lg text-bold">数量</view>
                        <view>
                            <goodsNumInput v-model="buyNum" :amount="goods.sku[selectIndex].amount" />
                        </view>
                    </view>
                </view>
                <view>
                    <button v-if="mode === 'buy'" @click="returnSku('buy')" class="bg-main round text-base">立即购买</button>
                    <button v-if="mode === 'cart'" @click="returnSku('cart')" class="bg-main round text-base">加入购物车</button>
                </view>
            </view>
        </template>
    </popupBottom>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useTask } from "@/utils/message";
import popupBottom from "@/components/common/popup-bottom.vue";
import goodsNumInput from "../input/goods-num-input.vue";

interface skuType {
    goods: AnyObject; // 商品数据
    mode: "cart" | "buy"; // 打开模式  购物车或立即购买
    step?: number; // 添加数量的步长
}

const props = withDefaults(defineProps<skuType>(), {
    goods: () => ({}),
    mode: "buy",
    step: 1
});
const emits = defineEmits(["addCart", "buy"]);
const popupBottomRef = ref<InstanceType<typeof popupBottom>>();
const selectIndex = ref<number>(0); // 选择规格索引
const buyNum = ref<number>(1); // 购买数量

const selectSku = (index: number) => {
    if (props.goods.sku[index].amount == 0) {
        useTask("该规格以无库存");
    }
    selectIndex.value = index;
};

const returnSku = (type: "cart" | "buy") => {
    let data = props.goods.sku[selectIndex.value];
    data.num = buyNum.value;
    type === "cart" ? emits("addCart", data) : emits("buy", data);
    popupBottomRef.value?.close();
};

const open = () => {
    popupBottomRef.value?.open();
};

defineExpose({
    open
});
</script>

<style scoped lang="scss">
.sku-popup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(60vh - 60rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);

    .sku-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30rpx;
    }

    .icon {
        width: 50rpx;
        height: 50rpx;
        border-radius: 10rpx;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
